<template>
  <div>
    <span>消息模板选择：</span>
    <a-button @click="showModal" type="primary">+&nbsp;添加</a-button>

  <div class="model" ref="model">
      <a-modal
      :visible="visible"
      title="消息模板选择"
      @ok="handleOk"
      @cancel="handleOk"
      :footer="null"
      :getContainer='()=>$refs.model'
    >
      <a-form :model="formData">
        <a-row>
          <a-col :span="8">
            <a-form-item label="搜索名称">
              <a-input
                style="width: 180px"
                v-model:value="formData.searchName"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="消息模板ID">
              <a-input
                placeholder="多个ID,请使用英文,分隔"
                style="width: 200px"
                v-model:value="formData.searchId"
              ></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="类型" style="margin-left: 30px">
              <a-select
                placeholder="不限"
                style="width: 200px"
                @change="handleChange"
                v-model:value="formData.discountType"
                :options="discountType"
              >
               
              </a-select>
            </a-form-item>
          </a-col> -->
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-button type="primary" size="small" @click="addMore"
              >+批量添加</a-button
            >
          </a-col>
          <a-col :span="12">
            <a-button size="small" class="btn-right" @click="reset"
              >重置</a-button
            >
            <a-button
              type="primary"
              size="small"
              class="btn-right"
              @click="search"
              >查询</a-button
            >
          </a-col>
        </a-row>
        <a-row style="margin-top: 10px">
          <a-table
            :pagination="pagination"
            :columns="columns"
            :data-source="datalist"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :rowKey="
              (record, index, key) => {
                return record.id;
              }
            "
            style="width: 1150px"
          >
            <span slot="add" slot-scope="text,record">
             <a class="btn" @click="addFn(record)">添加</a>
          </span>
          </a-table>
        </a-row>
      </a-form>
    </a-modal>
  </div>
     <a-table
    bordered
    :columns="columns2"
    :data-source="discountList"
    style="width: 1000px; margin-top: 10px"
    :pagination="false"
    v-if="discountList.length > 0"
  >
  <span slot="add" slot-scope="text,record,index">
    <a class="btn" @click="delFn(record,index)" style="margin-right: 10px" >删除</a>
    <a class="btn" @click="up(record,index)" style="margin-right: 10px"  v-show="index !== 0">上移</a>
    <a class="btn" @click="down(record,index)" style="margin-right: 10px"  v-show="index !== discountList.length -1">下移</a>
  </span>
  </a-table>
  </div>
 
</template>
<script>
import { getWeChatTemplateList } from "@/api/task/taskscene.js";

const columns = [
  {
    title: "消息模板ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "消息模板名称",
    dataIndex: "templateName",
    key: "templateName",
  },
  {
    title: "品牌",
    dataIndex: "brand",
    key: "brand",
  },
  {
    title: "模板跳转类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "操作",
    dataIndex: "add",
    key: "add",
    width:"20%",
    scopedSlots: {
      customRender: "add",
    },
  },
];
const columns2 = [
  // {
  //   title: "序号",
  //   key: "index",
  //   customRender: (text) => {
  //     return text.index + 1;
  //   },
  // },
    {
    title: "推送优先级",
      customRender: (text, record, index) => `${index + 1}`
    },
  {
    title: "消息模板ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "消息模板名称",
    dataIndex: "templateName",
    key: "templateName",
  },
  {
    title: "品牌",
    dataIndex: "brand",
    key: "brand",
  },
  {
    title: "模板跳转类型",
    dataIndex: "type",
    key: "type",
  },
 {
          title: "操作",
          dataIndex: "add",
          key: "add",
          width:"20%",
          scopedSlots: { customRender: "add" },
        },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
  props:['templateIdList'],
  components: {},
  data() {
    return {
      formData: {
        searchName: "",
        searchId: "",
      },
      visible: false,

      datalist: [],
      multiple: [], //多选
      columns,
      columns2,
      discountList: [],
      Type: "不限",
      rowSelection,
      btnId: "",
      expandedRowKeys: [],
      selectedRowKeys: [],
      selectedRows: [],
      discountType: [
        { label: "不限", value: 1 },
        { label: "优惠券", value: 2 },
        { label: "现金券", value: 3 },
      ],
      pagination: {
       //表格自带分页器的属性定义
       pageNo: 1,
        pageSize: 10,//默认每页显示10条数据
        total:0,
        showTOtal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: [ "10", "20", "30","40"], //自定义每页显示多少条数据
        showQuickJumper: true, //允许跳转至xx页
         onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
        onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//点击页码事件
      },
    };
  },
  methods: {
       onPageChange(page, pageSize) {
      this.pagination.pageNo = page
       this.getWeChatModel()
   },
   onSizeChange(current, pageSize) {
       this.pagination.pageNo = 1
       this.pagination.pageSize = pageSize
        this.getWeChatModel()
   } ,
    addMore() {
      this.discountList.push(...this.multiple);
      console.log(this.discountList);
      this.sendChooseData();
      this.visible = false;
      this.selectedRowKeys = [];
    },
    delFn(e) {
      // console.log(e.key);

      this.discountList.splice(this.discountList.indexOf(e), 1);
      console.log(this.discountList);
      this.sendChooseData();
    },
    addFn(e) {
      console.log(e);
      this.discountList.push(e);
      console.log(this.discountList);
      this.sendChooseData();
      this.selectedRowKeys = [];
      this.visible = false;
    },
    sendChooseData() {
      this.$emit("chooseData", this.discountList);
    },
    // 点击显示弹窗
    showModal(id) {
      this.getWeChatModel();

      this.visible = true;
    },
    handleChange(value) {
      console.log(value);
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      (this.formData.searchName = ""),
        (this.formData.searchId = ""),
        (this.selectedRowKeys = []);
      this.formData.discountType = null;
    },
    onSelectChange: function (selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);

      let datas = selectedRows; //JSON.parse(JSON.stringify(selectedRows));
      console.log(datas);
      this.multiple = datas;
      // 赋值同步本地data接受数据(这里只取id即可)
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },

    reset() {
      (this.formData.searchName = ""),
        (this.formData.searchId = ""),
        (this.selectedRowKeys = []);
      this.formData.discountType = null;
      // this.getWeChatModel()

      this.getWeChatModel();
    },
    search() {
      this.getWeChatModel();
    },
    // 获取优惠券列表数据
    // 公众号模板列表接口
    getWeChatModel() {
       let pageNum=this.pagination.pageNo;
      let pageSize=this.pagination.pageSize
      let templateName = this.formData.searchName;
      let id = this.formData.searchId;
      let data = {
        pageNum: pageNum,
        pageSize: pageSize,
        id: id,
        templateName: templateName,
      };
      getWeChatTemplateList(data, (res) => {
        this.pagination.total=res.data.total
        console.log('getWeChatTemplateList',res);
        res.data.records.forEach(item=> {
          if (item.type == "1") {
            item.type = "网页";
          } else if (item.type == "2") {
            item.type = "小程序";
          }
        });
        console.log(res.data.records);
        this.datalist = res.data.records;
      });
    },
    // 获取公众号推文

    // 获取人群包接口

    up(record) {
      let id = record.id
      let index1 =  this.discountList.findIndex((el,index) => {
          return el.id == id
      })
      let item =  this.discountList[index1]
      this.discountList.splice(index1,1)
      this.discountList.splice(index1-1,0,item)
    },
    down(record) {
      let id = record.id
      let index1 =  this.discountList.findIndex((el,index) => {
          return el.id == id
      })
      let item = this.discountList[index1]
      this.discountList.splice(index1,1)
      this.discountList.splice(index1+1,0,item)
    },
  },
  created() {
    this.getWeChatModel();
   if(this.templateIdList){
     let data=JSON.parse(JSON.stringify(this.templateIdList))
    this.discountList=data
   }else{
    return
   }
    
  },
};
</script>
<style scoped lang="less">
.btn-right {
  width: 70px;
  margin-right: 10px;
  float: right;
}
.ant-modal{
  width: 1200px;
}
.ant-table-thead {
  font-weight: bold !important;
  text-align: center;
}
.ant-form-item{
  display: flex;
}
div /deep/ .model .ant-modal{
  width: 1200px !important;
}
</style>
